package com.google.android.catalog.app.compose.textfield

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import com.gitee.wsl.compose.ui.base.TextField
import com.gitee.wsl.compose.ui.textfield.filter.maxLength
import com.gitee.wsl.compose.ui.textfield.filter.number
import com.gitee.wsl.compose.ui.textfield.filter.validator
import com.gitee.wsl.transform.validator.string.StringValidator
import com.gitee.wsl.transform.validator.string.ext.allLowerCase

import com.google.android.catalog.framework.annotations.Sample

@Sample(
    name = "Compose text field sample",
    description = "Shows how to add a compose text field target in the catalog",
    documentation = "https://github.com/google/casa-android#create-sample-modules"
)
@Composable
fun ComposeTextFieldSample() {
    Column {
        val filter = TextField.Filter.maxLength(8)
        OutlinedTextField(
            value = filter.inputValue,
            onValueChange = filter.onValueChange()
        )
        val charFilter =  TextField.Filter.validator(StringValidator.allLowerCase())
        OutlinedTextField(
            value = charFilter.inputValue,
            onValueChange = charFilter.onValueChange()
        )
        val numberFilter =  TextField.Filter.number()
        OutlinedTextField(
            value = numberFilter.inputValue,
            onValueChange = numberFilter.onValueChange()
        )

        Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            Text(text = "Hi, I am a compose sample target!")
        }
    }

}